<template>
  <div>
    <div class="titleBox">
      <div class="icon-xinxi iconfontcolor"></div>
      <h3 class="title">线路信息</h3>
      <div class="line"></div>
    </div>
    <div class="list">
      <el-table style="width: 100%" :data="lineInfoData">
        <el-table-column align="center" prop="SerialNumber" label="序号" width="60">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="lineName" label="路线名称"></el-table-column>

        <el-table-column align="left" prop="" label="发货地" min-width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.startAddress.length != 0">
              <div v-for="(item, i) in scope.row.startAddress" :key="i">{{ item }}</div>
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="" label="目的地" min-width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.endAddress.length != 0">
              <div v-for="(item, i) in scope.row.endAddress" :key="i">{{ item }}</div>
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="getDetail(scope.row.lineId)">详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="线路详情" :visible.sync="dialogVisible" width="920px">

      <el-descriptions :column="1" :labelStyle="{
        width: '80px',
        color: '#262626',
        fontSize: '12px',
        fontWeight: 'bold',
        padding: '10px',
      }" :contentStyle="{
  color: '#262626',
  lineHeight: '38px',
  fontSize: '12px',
}">
        <el-descriptions-item label="线路名称">{{
          DetailData.lineName
        }}</el-descriptions-item>
        <el-descriptions-item label="发货地">
          <el-table style="width: 100%" size="small" :data="startLine" :header-cell-style="tableHeaderStyle"
            :row-class-name="rowStyle">
            <el-table-column align="center" prop="SerialNumber" label="序号" width="50">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="detail" label="详细门牌号" width="100">
            </el-table-column>
            <el-table-column prop="contact" label="发货人" width="100"> </el-table-column>
            <el-table-column prop="phone" label="发货电话" width="160"> </el-table-column>
          </el-table>
        </el-descriptions-item>
        <el-descriptions-item label="收货地">
          <el-table style="width: 100%" size="small" :data="endLine" :header-cell-style="tableHeaderStyle"
            :row-class-name="rowStyle">
            <el-table-column align="center" prop="SerialNumber" label="序号" width="50">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="detail" label="详细门牌号" width="100">
            </el-table-column>
            <el-table-column prop="contact" label="收货人" width="100"> </el-table-column>
            <el-table-column prop="phone" label="收货电话" width="160"> </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  props: {
    lineInfoData: Array,
  },
  data() {
    return {
      dialogVisible: false,
      DetailData: {},
      startLine: [],
      endLine: [],
    };
  },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    rowStyle({ row, rowIndex }) {
      return 'tableRowStyleName'
    },
    getDetail(id) {
      this.dialogVisible = true;
      // console.log(id);
      httpApi.cargoOwnerApi.getLineInfoDetails({ lineId: id }).then((res) => {
        // console.log('路线信息 子详情数据', res);

        this.DetailData = res.data.data;
        this.startLine = res.data.data.startLine;
        this.endLine = res.data.data.endLine;
        // console.log(this.DetailData)
      });
    },

  },
  mounted() { },

};
</script>

<style lang="scss" scoped>
.titleBox {
  display: flex;
  align-items: center;
  margin-bottom: 14px;

  >.icon-xinxi {
    font-size: 16px;
    margin-right: 7px;
  }

  >.title {
    color: #262626;
    font-size: 14px;
    margin-right: 14px;
  }

  >.line {
    height: 1px;
    flex: 1;
    background-color: #f0f0f0;
  }
}

.list {
  height: calc(100% - 48px);

  ::v-deep .el-table__body-wrapper {
    max-height: calc(100vh - 335px) !important;
    overflow-y: scroll;
  }

  ::v-deep .el-table .el-table__cell {
    text-align: center;
  }

  // 表头样式
  ::v-deep .el-table__header th {
    background-color: #f0f6fd;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: center;

    // 表 body的td
    ::v-deep .el-table__body td {
      color: #595959;
      font-size: 12px;
    }
  }
}
</style>

<style lang = "scss">
.tableRowStyleName {
  color: #262626 !important;
  font-size: 12px;
  padding: 0px;
}
</style>
